<!--
 * @Author: 'yangyuhang1203' '2621131059@qq.com'
 * @Date: 2025-09-11 10:08:25
 * @LastEditors: 'yangyuhang1203' '2621131059@qq.com'
 * @LastEditTime: 2025-09-11 11:16:28
 * @FilePath: \企业级\前端\Vue\Vue指令.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- V-bind（HTML元素的属性值） v-model（表单元素的value值） -->
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url"><br>
        <!-- v-on事件绑定，后面提供事件名称 -->
        <button v-on:click="handle()">按钮一</button><br>
        <!-- v-if(提供表达式，true的时候渲染)和v-show(元素display属性的值) -->
        <div id="app">
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻⼈(35及以下)</span>
        <span v-else-if="age > 35 && age < 60"></span>中年⼈(35-60)</span>
        <span v-else>⽼年⼈(60及以上)</span>
        </div>
        <br><br>
        <!-- v-for遍历 -->
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
            <ol>
                <li v-for="(item,index) in list">{{index}}:{{item}}</li>
            </ol>
            <!-- <div v-for="(item,index) in list">{{index+1}}.{{item}}</div> -->
        </div>
        </div>
        <!-- <ul>（Unordered List - 无序列表）
        语义：表示一组无顺序关系的列表项
        特点：默认会为每个列表项添加项目符号（通常是圆点）
        结构：必须包含<li>作为子元素，不能直接放文本或其他标签
        <ol>（Ordered List - 有序列表）
        语义：表示一组有顺序关系的列表项
        特点：默认会为每个列表项添加数字编号（从 1 开始）
        结构：同样必须包含<li>作为子元素 -->

    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                "url":"http://www.baidu.com",
                "age":20,
                "list":["北京", "上海", "⻄安", "成都", "深圳"]
            },
            methods:{
                handle(){
                    alert("按钮被点击")
                }
            }
        } );
    </script>
</body>
</html>